From: Florian Müllner Date: Wed, 26 Jan 2022 00:33:21 +0000 (+0100) Subject: workspaceSwitcherPopup: Implement new OSD design X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~530^2^2~25 X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=f88222edd6ff4dd1fcc4b1de9ec5176d9fdbf294;p=gnome-shell.git workspaceSwitcherPopup: Implement new OSD design Move the popup to the bottom and represent workspaces as small dots instead of as scaled down representations of the work area. https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/152 Part-of: --- diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss index 3edacda5b..1996e09f7 100644 --- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss +++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss @@ -1,38 +1,24 @@ /* Workspace Switcher */ -$ws_padding: $base_padding*2; -$ws_border_radius: $modal_radius + 8px; - -.workspace-switcher-group { - padding: $base_padding * 2; -} - -.workspace-switcher-container { - @extend %osd_panel; - padding: $ws_padding; - border-radius: $ws_border_radius; - box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1); -} +$ws_indicator_height: $base_icon_size * 2; +$ws_dot_active: $ws_indicator_height / 3; +$ws_dot_inactive: $ws_indicator_height / 6; .workspace-switcher { - background: transparent; - border: none; - border-radius: 0; + @extend %osd_panel; + margin: 4em; spacing: $base_spacing * 2; } .ws-switcher-indicator { - background: transparent; - height: 50px; - background-size: 32px; - border: 1px solid transparentize($osd_fg_color,0.9); - border-radius: $base_border_radius + 3px; + background-color: transparentize($osd_fg_color,0.5); + padding: $ws_dot_inactive / 2; + margin: ($ws_indicator_height - $ws_dot_inactive) / 2; + border-radius: $ws_indicator_height; &:active { - height: 52px; - background-color: $selected_bg_color; - border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%)); - border-radius: $base_border_radius + 3px; - color: $selected_fg_color; + background-color: $osd_fg_color; + padding: $ws_dot_active / 2; + margin: ($ws_indicator_height - $ws_dot_active) / 2; } } diff --git a/js/ui/workspaceSwitcherPopup.js b/js/ui/workspaceSwitcherPopup.js index 9c5b3a9a7..23bb98316 100644 --- a/js/ui/workspaceSwitcherPopup.js +++ b/js/ui/workspaceSwitcherPopup.js @@ -3,140 +3,35 @@ const { Clutter, GLib, GObject, St } = imports.gi; +const Layout = imports.ui.layout; const Main = imports.ui.main; var ANIMATION_TIME = 100; var DISPLAY_TIMEOUT = 600; -var WorkspaceSwitcherPopupList = GObject.registerClass( -class WorkspaceSwitcherPopupList extends St.Widget { + +var WorkspaceSwitcherPopup = GObject.registerClass( +class WorkspaceSwitcherPopup extends Clutter.Actor { _init() { super._init({ - style_class: 'workspace-switcher', offscreen_redirect: Clutter.OffscreenRedirect.ALWAYS, + x_expand: true, + y_expand: true, + x_align: Clutter.ActorAlign.CENTER, + y_align: Clutter.ActorAlign.END, }); - this._itemSpacing = 0; - this._childHeight = 0; - this._childWidth = 0; - this._orientation = global.workspace_manager.layout_rows == -1 - ? Clutter.Orientation.VERTICAL - : Clutter.Orientation.HORIZONTAL; - - this.connect('style-changed', () => { - this._itemSpacing = this.get_theme_node().get_length('spacing'); - }); - } - - _getPreferredSizeForOrientation(_forSize) { - let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex); - let themeNode = this.get_theme_node(); - - let availSize; - if (this._orientation == Clutter.Orientation.HORIZONTAL) - availSize = workArea.width - themeNode.get_horizontal_padding(); - else - availSize = workArea.height - themeNode.get_vertical_padding(); - - let size = 0; - for (let child of this.get_children()) { - let [, childNaturalHeight] = child.get_preferred_height(-1); - let height = childNaturalHeight * workArea.width / workArea.height; - - if (this._orientation == Clutter.Orientation.HORIZONTAL) - size += height * workArea.width / workArea.height; - else - size += height; - } - - let workspaceManager = global.workspace_manager; - let spacing = this._itemSpacing * (workspaceManager.n_workspaces - 1); - size += spacing; - size = Math.min(size, availSize); - - if (this._orientation == Clutter.Orientation.HORIZONTAL) { - this._childWidth = (size - spacing) / workspaceManager.n_workspaces; - return themeNode.adjust_preferred_width(size, size); - } else { - this._childHeight = (size - spacing) / workspaceManager.n_workspaces; - return themeNode.adjust_preferred_height(size, size); - } - } - - _getSizeForOppositeOrientation() { - let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex); - - if (this._orientation == Clutter.Orientation.HORIZONTAL) { - this._childHeight = Math.round(this._childWidth * workArea.height / workArea.width); - return [this._childHeight, this._childHeight]; - } else { - this._childWidth = Math.round(this._childHeight * workArea.width / workArea.height); - return [this._childWidth, this._childWidth]; - } - } - - vfunc_get_preferred_height(forWidth) { - if (this._orientation == Clutter.Orientation.HORIZONTAL) - return this._getSizeForOppositeOrientation(); - else - return this._getPreferredSizeForOrientation(forWidth); - } - - vfunc_get_preferred_width(forHeight) { - if (this._orientation == Clutter.Orientation.HORIZONTAL) - return this._getPreferredSizeForOrientation(forHeight); - else - return this._getSizeForOppositeOrientation(); - } - - vfunc_allocate(box) { - this.set_allocation(box); - - let themeNode = this.get_theme_node(); - box = themeNode.get_content_box(box); - - let childBox = new Clutter.ActorBox(); - - let rtl = this.text_direction == Clutter.TextDirection.RTL; - let x = rtl ? box.x2 - this._childWidth : box.x1; - let y = box.y1; - for (let child of this.get_children()) { - childBox.x1 = Math.round(x); - childBox.x2 = Math.round(x + this._childWidth); - childBox.y1 = Math.round(y); - childBox.y2 = Math.round(y + this._childHeight); - - if (this._orientation == Clutter.Orientation.HORIZONTAL) { - if (rtl) - x -= this._childWidth + this._itemSpacing; - else - x += this._childWidth + this._itemSpacing; - } else { - y += this._childHeight + this._itemSpacing; - } - child.allocate(childBox); - } - } -}); - -var WorkspaceSwitcherPopup = GObject.registerClass( -class WorkspaceSwitcherPopup extends St.Widget { - _init() { - super._init({ x: 0, - y: 0, - width: global.screen_width, - height: global.screen_height, - style_class: 'workspace-switcher-group' }); + const constraint = new Layout.MonitorConstraint({ primary: true }); + this.add_constraint(constraint); Main.uiGroup.add_actor(this); this._timeoutId = 0; - this._container = new St.BoxLayout({ style_class: 'workspace-switcher-container' }); - this.add_child(this._container); - - this._list = new WorkspaceSwitcherPopupList(); - this._container.add_child(this._list); + this._list = new St.BoxLayout({ + style_class: 'workspace-switcher', + }); + this.add_child(this._list); this._redisplay(); @@ -167,12 +62,6 @@ class WorkspaceSwitcherPopup extends St.Widget { this._list.add_actor(indicator); } - - let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex); - let [, containerNatHeight] = this._container.get_preferred_height(global.screen_width); - let [, containerNatWidth] = this._container.get_preferred_width(containerNatHeight); - this._container.x = workArea.x + Math.floor((workArea.width - containerNatWidth) / 2); - this._container.y = workArea.y + Math.floor((workArea.height - containerNatHeight) / 2); } display(activeWorkspaceIndex) { @@ -186,8 +75,8 @@ class WorkspaceSwitcherPopup extends St.Widget { const duration = this.visible ? 0 : ANIMATION_TIME; this.show(); - this._container.opacity = 0; - this._container.ease({ + this.opacity = 0; + this.ease({ opacity: 255, duration, mode: Clutter.AnimationMode.EASE_OUT_QUAD, @@ -197,7 +86,7 @@ class WorkspaceSwitcherPopup extends St.Widget { _onTimeout() { GLib.source_remove(this._timeoutId); this._timeoutId = 0; - this._container.ease({ + this.ease({ opacity: 0.0, duration: ANIMATION_TIME, mode: Clutter.AnimationMode.EASE_OUT_QUAD,